<template>
  <div>
      <header-cmp>
      </header-cmp>
      <div class="zt">
        <div class="phone">
          <input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*"/>
        </div>
        <div class="yzm">
          <input type="text" v-model="userPwd" placeholder="请输入密码" pattern="[0-9]*"/>
        </div>
        <div class="login" @click="login"><span>登 录</span></div>
        <div class="qh">
          <span @click="tz">短信登录</span>
          <span @click="mm">找回密码</span>
          <span @click="zc">快速注册</span>
        </div>
      </div>
  </div>
</template>

<script>
import HeaderCmp from '../components/HeaderCmp.vue'
import { Toast } from 'mint-ui';
import axios from 'axios';
import {mapMutations} from 'vuex'
export default {
    data(){
        return{
            userTel:'',//用户输入的账号
            userPwd:'',//用户输入的密码
            rules:{
                //手机号验证规则
                userTel:{
                    rule:/^1[23456789]\d{9}$/,
                    msg:'手机号不能为空，并且是11位数字'
                },
                //密码验证
                userPwd:{
                    rule:/^\w{6,12}$/,
                    msg:'密码要在6-12位'
                }
            }
        }
    },
    components:{
        HeaderCmp
        
    },
    computed:{

    },  
    methods:{
      ...mapMutations(['USER_LOGIN']),
      zc(){
        this.$router.push('/reg')
      },
        tz(){
            this.$router.push('/login')
        },
        login(){
            if (this.validate('userTel')) return
            if (this.validate('userPwd')) return
            axios({
                url:"/ajax/login",
                method:'POST',
                data:{
                  userTel:this.userTel,
                  userPwd:this.userPwd,
                }
            }).then(({data})=>{
              if(!data.success) return;
              Toast(data.msg)
              //将公用数据存到vuex中
              this.USER_LOGIN(data.data)
              this.$router.push({name:'my'})
            }).catch(err=>{
              console.log(err)
            })
        },
        //验证信息提示
        validate(key){
            if(!this.rules[key].rule.test(this[key])){
                Toast(this.rules[key].msg)
                return true
            }
        },
        mm(){
          this.$router.push('/rec')
        }
    }
}
</script>

<style lang="scss" scoped>
.phone{
  width: 85%;
  height: 30px;
  input{
    width: 100%;
    height: 30px;
  }
}
.yzm{
  width: 85%;
  height: 30px;
  margin-top: 5%;
  margin-bottom: 5%;
  input{
    width: 100%;
    height: 30px;
  }
}
.login{
  width: 85%;
  height: 30px;
  background-color: red;
  border-radius: 10px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
}
.qh{
  width: 85%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
}
.zt{
    margin-left: 10%;
    margin-top: 5%;
}
</style>